<template>
    <div>
        <div>
            <el-select v-model="value" placeholder="请选择">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
            <el-button @click="searchOrder">查询</el-button>
            <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="id" label="订单id" width="180">
                </el-table-column>
                <el-table-column label="是否打印" width="180">
                    <template slot-scope="scope">
                        {{ scope.row.hasPrint == 0 ? "未打印" : "已打印" }}
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="handleShow(scope.row)">查看</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div id="print_contain" v-show="show" style="width: 200px">
            <div style="font-weight: bold;font-size: 14px;">{{ orderInfo.shopName }}</div>
            <span>===================</span>
            <div>订单号:{{ orderInfo.id }}</div>
            <span>===================</span>
            <div style="border-bottom: 1px solid #DADADA; width: 200px;">
                <table style="width: 200px;">
                    <thead>
                        <tr>
                            <td width="60%">名称</td>
                            <td width="20%">数量</td>
                            <td width="20%">金额</td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="i in orderInfo.orderDetailVos" :key="i.id">
                            <td>{{ i.goodsName || "" }}</td>
                            <td>{{ i.goodsNum || 0 }}</td>
                            <td>{{ price(i.totalPrice) }}</td>
                        </tr>


                    </tbody>
                </table>
            </div>
            <div style="width: 200px;">
                <label style="display: block;float: left;">总计</label>
                <label style="display: block;float: right;">{{price(orderInfo.orderMoney)}}</label>
                <div style="clear: both;"></div>
            </div>
            <span>================</span>
            <div v-if="orderInfo.addressId === '0'" class="section5">
                <label style="display: block;">客户自提</label>
            </div>
            <div class="section5" v-else-if="orderInfo.addressId">
                <label style="display: block;">姓名：{{ orderInfo.userName || "" }}</label>
                <label style="display: block;">地址：{{ orderInfo.address || ""}}</label>
                <label style="display: block;">电话：{{ orderInfo.phone || "" }}</label>
            </div>
            <div class="section5" v-else>
                <label style="display: block;">没有地址</label>
            </div>
        </div>
        <el-button size="mini" @click="handlePrint" v-show="show">打印</el-button>
    </div>
</template>
<script>
import { getLodop } from '../assets/js/LodopFuncs';
import { request } from '@/utils/request';
export default {
    name: "shop",
    data() {
        return {
            show: false,
            shopId: '',
            value: '',
            options: [{
                value: 1,
                label: '完成'
            },
            {
                value: 2,
                label: '创建'
            },
            {
                value: 3,
                label: '支付成功'
            },
            ],

            tableData: [],
            orderInfo: {},
            orderId:'',
        };
    },
    mounted() {
        let id = this.$route.params.id
        this.shopId = id
    },
    methods: {
        price(v) {
            if(v) {
                return (v/100).toFixed(2)
            }
            return 0
        },
        async searchOrder() {
            if(!this.value) {
                return this.$message.error('请先选择查询类型');
            }
            let d = await request.post("/orders", {
                shopId: this.shopId,
                state: this.value
            })
            d = d.data
            if(d.length == 0) {
                this.$message('没有查到数据');
            }
            this.tableData = d
        },
        async handleShow(row) {
            let d = await request.get("/order/" + row.id)
            d = d.data
            this.orderInfo = d;
            this.show = true

        },
        handlePrint() {
            let _this = this
            let orderId = this.orderInfo.id
            request.get('/print/' + orderId).then(() => {
                let os = _this.tableData.filter(e => {
                    return e.id == orderId
                })
                if(os.length > 0) {
                    os[0].hasPrint = 1
                }
            })
            this.$nextTick(function () {
                let LODOP = getLodop();
                LODOP.PRINT_INIT("");
                LODOP.ADD_PRINT_HTM(10, 10, "100%", 500, document.getElementById("print_contain").innerHTML);
                LODOP.PREVIEW();
            })
        }
    }
}
</script>